Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
MobX is a state management library for JavaScript applications. It enables developers to manage the application state outside of UI frameworks in a reactive way that ensures that the state is consistent and predictable. MobX uses observable data structures and automatically tracks changes, updating the UI when necessary.
Observable State
Create observable state that can be tracked and updated. When the state changes, MobX will automatically propagate changes to any computed values or reactions that depend on the changed state.
import { observable } from 'mobx';
const appState = observable({
count: 0,
increment: function() {
this.count++;
},
decrement: function() {
this.count--;
}
});
Computed Values
Define computed values that will be re-evaluated when any observable data they depend on changes. Computed values are cached and only updated when necessary.
import { computed, makeObservable } from 'mobx';
class TodoList {
todos = [];
get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
constructor() {
makeObservable(this, {
todos: observable,
unfinishedTodoCount: computed
});
}
}
Reactions
Reactions are a way to automatically run side effects when observable data changes. The autorun function is one type of reaction that runs immediately and then re-runs every time its dependencies change.
import { observable, autorun } from 'mobx';
const temperature = observable.box(20);
const reaction = autorun(() => {
console.log(`Temperature is: ${temperature.get()}C`);
});
temperature.set(25); // This will trigger the autorun and log the new temperature
Actions
Actions are functions that modify observables. They are the only way to modify state in MobX, and they can be bound to the class instance using the action.bound decorator.
import { observable, action } from 'mobx';
class Store {
@observable count = 0;
@action.bound increment() {
this.count++;
}
@action.bound decrement() {
this.count--;
}
}
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Unlike MobX, Redux uses a single immutable state tree and pure reducer functions to handle state changes.
Vuex is a state management pattern and library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. Vuex is similar to Redux and differs from MobX in its strict emphasis on mutation tracking and less focus on reactive programming.
Immer is a tiny package that allows you to work with immutable state in a more convenient way. It uses a copy-on-write mechanism to ensure that the original state is not modified. While Immer is not a state management library like MobX, it can be used with state management libraries to simplify handling immutable data.
Simple, scalable state management
npm install mobx --save
. React bindings: npm install mobx-react --save
. To enable ESNext decorators (optional), see below.MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is very simple:
Anything that can be derived from the application state, should be derived. Automatically.
which includes the UI, data serialization, server communication, etc.
React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Both React and MobX provide very optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.
MobX has only a few core concepts. The following snippets can be tried online using JSFiddle (or without ES6 and JSX).
MobX adds observable capabilities to existing data structures like objects, arrays and class instances. This can simply be done by annotating your class properties with the @observable decorator (ES.Next).
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}
Using observable
is like turning a property of an object into a spreadsheet cell.
But unlike spreadsheets, these values cannot just be primitive values, but also references, objects and arrays.
You can even define your own observable data sources.
If these @
thingies look alien to you, these are ES.next decorators.
Using them is entirely optional in MobX. See the documentation for details how to either use or avoid them.
MobX runs on any ES5 environment, but leveraging ES.next features like decorators are the cherry on the pie when using MobX.
The remainder of this readme uses decorators, but remember, they are optional.
For example, in good ol' ES5 the above snippet would look like:
function Todo() {
this.id = Math.random()
extendObservable(this, {
title: "",
finished: false
})
}
With MobX you can define values that will be derived automatically when relevant data is modified.
By using the @computed
decorator or by using getter / setter functions when using (extend)Observable
.
class TodoList {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
MobX will ensure that unfinishedTodoCount
is updated automatically when a todo is added or when one of the finished
properties is modified.
Computations like these resemble formulas in spreadsheet programs like MS Excel. They update automatically and only when required.
Reactions are similar to a computed value, but instead of producing a new value, a reaction produces a side effect for things like printing to the console, making network requests, incrementally updating the React component tree to patch the DOM, etc. In short, reactions bridge reactive and imperative programming.
If you are using React, you can turn your (stateless function) components into reactive components by simply adding the observer
function / decorator from the mobx-react
package onto them.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {observer} from 'mobx-react';
@observer
class TodoListView extends Component {
render() {
return <div>
<ul>
{this.props.todoList.todos.map(todo =>
<TodoView todo={todo} key={todo.id} />
)}
</ul>
Tasks left: {this.props.todoList.unfinishedTodoCount}
</div>
}
}
const TodoView = observer(({todo}) =>
<li>
<input
type="checkbox"
checked={todo.finished}
onClick={() => todo.finished = !todo.finished}
/>{todo.title}
</li>
)
const store = new TodoList();
ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('mount'));
observer
turns React (function) components into derivations of the data they render.
When using MobX there are no smart or dumb components.
All components render smartly but are defined in a dumb manner. MobX will simply make sure the components are always re-rendered whenever needed, but also no more than that. So the onClick
handler in the above example will force the proper TodoView
to render, and it will cause the TodoListView
to render if the number of unfinished tasks has changed.
However, if you would remove the Tasks left
line (or put it into a separate component), the TodoListView
will no longer re-render when ticking a box. You can verify this yourself by changing the JSFiddle.
Custom reactions can simply be created using the autorun
,
autorunAsync
or when
functions to fit your specific situations.
For example the following autorun
prints a log message each time the amount of unfinishedTodoCount
changes:
autorun(() => {
console.log("Tasks left: " + todos.unfinishedTodoCount)
})
Why does a new message get printed each time the unfinishedTodoCount
is changed? The answer is this rule of thumb:
MobX reacts to any existing observable property that is read during the execution of a tracked function.
For an in-depth explanation about how MobX determines to which observables needs to be reacted, check understanding what MobX reacts to
Unlike many flux frameworks, MobX is unopinionated about how user events should be handled.
onClick
handler.In the end it all boils down to: Somehow the state should be updated.
After updating the state MobX
will take care of the rest in an efficient, glitch-free manner. So simple statements, like below, are enough to automatically update the user interface.
There is no technical need for firing events, calling a dispatcher or what more. A React component in the end is nothing more than a fancy representation of your state. A derivation that will be managed by MobX.
store.todos.push(
new Todo("Get Coffee"),
new Todo("Write simpler code")
);
store.todos[0].finished = true;
Nonetheless, MobX has an optional built-in concept of actions
.
Use them to your advantage; they will help you to structure your code better and make wise decisions about when and where state should be modified.
MobX is one of the least obtrusive libraries you can use for state management. That makes the MobX
approach not just simple, but very scalable as well:
With MobX you don't need to normalize your data. This makes the library very suitable for very complex domain models (At Mendix for example ~500 different domain classes in a single application).
Since data doesn't need to be normalized, and MobX automatically tracks the relations between state and derivations, you get referential integrity for free. Rendering something that is accessed through three levels of indirection?
No problem, MobX will track them and re-render whenever one of the references changes. As a result staleness bugs are a thing of the past. As a programmer you might forget that changing some data might influence a seemingly unrelated component in a corner case. MobX won't forget.
As demonstrated above, modifying state when using MobX is very straightforward. You simply write down your intentions. MobX will take care of the rest.
MobX builds a graph of all the derivations in your application to find the least number of re-computations that is needed to prevent staleness. "Derive everything" might sound expensive, MobX builds a virtual derivation graph to minimize the number of recomputations needed to keep derivations in sync with the state.
In fact, when testing MobX at Mendix we found out that using this library to track the relations in our code is often a lot more efficient then pushing changes through our application by using handwritten events or "smart" selector based container components.
The simple reason is that MobX will establish far more fine grained 'listeners' on your data then you would do as a programmer.
Secondly MobX sees the causality between derivations so it can order them in such a way that no derivation has to run twice or introduces a glitch.
How that works? See this in-depth explanation of MobX.
MobX works plain javascript structures. Due to it's unobtrusiveness it works with most javascript libraries out of the box, without needing MobX specific library flavors.
So you can simply keep using your existing router, data fetching, and utility libraries like react-router
, director
, superagent
, lodash
etc.
For the same reason you can use it out of the box both server and client side, in isomorphic applications and with react-native.
The result of this is that you often need to learn less new concepts when using MobX in comparison to other state management solutions.
MobX is proudly used in mission critical systems at Mendix
MobX is inspired by reactive programming principles as found in spreadsheets. It is inspired by MVVM frameworks like in MeteorJS tracker, knockout and Vue.js. But MobX brings Transparent Functional Reactive Programming to the next level and provides a stand alone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.
A ton of credits for Mendix, for providing the flexibility and support to maintain MobX and the chance to proof the philosophy of MobX in a real, complex, performance critical applications.
And finally kudo's for all the people that believed in, tried, validated and even sponsored MobX.
After using #mobx for lone projects for a few weeks, it feels awesome to introduce it to the team. Time: 1/2, Fun: 2X
Working with #mobx is basically a continuous loop of me going “this is way too simple, it definitely won’t work” only to be proven wrong
Try react-mobx with es6 and you will love it so much that you will hug someone.
I have built big apps with MobX already and comparing to the one before that which was using Redux, it is simpler to read and much easier to reason about.
The #mobx is the way I always want things to be! It's really surprising simple and fast! Totally awesome! Don't miss it!
npm test
to run the basic test suite, npm run coverage
for the test suite with coverage and npm run perf
for the performance tests.Bower support is available through the infamous unpkg.com:
bower install https://unpkg.com/mobx/bower.zip
Then use lib/mobx.umd.js
or lib/mobx.umd.min.js
See the changelog for all the details about mobservable
to mobx
.
Was MobX key in making your project a success? Share the victory by using the donate button! MobX is developed largely in free time, so any ROI is appreciated :-). If you leave a name you will be added to the sponsors list :).
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
FAQs
Simple, scalable state management.
The npm package mobx receives a total of 1,382,579 weekly downloads. As such, mobx popularity was classified as popular.
We found that mobx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.